ruoyi-react-front/app/(business)/system/role/auth/[roleid]/page.tsx

"use client";

import {fetchApi} from "@/app/_modules/func";
import {DeleteOutlined, ExclamationCircleFilled, PlusOutlined, ReloadOutlined,} from "@ant-design/icons";
import type {ActionType, ProColumns, ProFormInstance,} from "@ant-design/pro-components";
import {PageContainer, ProTable,} from "@ant-design/pro-components";

import type {GetProp, UploadProps} from "antd";
import {Button, Modal, Space, Tag, Upload,} from "antd";
import {useRouter} from "next/navigation";

import {faCheck, faToggleOff, faToggleOn, faXmark,} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

import {useRef, useState} from "react";

type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];

const { Dragger } = Upload;

export type OptionType = {
  label: string;
  value: string | number;
};

export default function RoleAuth({ params }: { params: { roleid: string } }) {
  const { push } = useRouter();

  const roleId = params.roleid;

  // 添加用于控制批量取消授权确认模态框的状态
  const [batchRemoveAuthModalVisible, setBatchRemoveAuthModalVisible] = useState(false);
  
  // 添加用于控制单个取消授权确认模态框的状态
  const [removeAuthModalVisible, setRemoveAuthModalVisible] = useState(false);
  const [removeAuthRecord, setRemoveAuthRecord] = useState<any>(null);

  //表格列定义
  const columns: ProColumns[] = [
    {
      title: "用户名称",
      dataIndex: "userName",
      order: 2,
    },
    {
      title: "用户昵称",
      dataIndex: "nickName",
      search: false,
    },

    {
      title: "邮箱",
      dataIndex: "email",
      search: false,
    },
    {
      title: "手机号",
      dataIndex: "phonenumber",
      order: 1,
    },
    {
      title: "状态",
      dataIndex: "status",
      search: false,
      valueEnum: {
        0: {
          text: "正常",
          status: "0",
        },
        1: {
          text: "停用",
          status: "1",
        },
      },
      render: (text, record) => {
        return (
          <Space>
            <Tag
              color={record.status == 0 ? "green" : "red"}
              icon={
                record.status == 0 ? (
                  <FontAwesomeIcon icon={faCheck} />
                ) : (
                  <FontAwesomeIcon icon={faXmark} />
                )
              }
            >
              {text}
            </Tag>
          </Space>
        );
      },
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      valueType: "dateTime",
      search: false,
    },
    {
      title: "操作",
      key: "option",
      search: false,
      render: (_, record) => {
        if (record.userId != 1)
          return [
            <Button
              key="deleteBtn"
              type="link"
              danger
              icon={<DeleteOutlined />}
              onClick={() => onClickRemoveAuth(record)}
            >
              取消授权
            </Button>,
          ];
      },
    },
  ];

  //未分配授权用户列定义
  const unAllocateColumns: ProColumns[] = [
    {
      title: "用户名称",
      dataIndex: "userName",
      order: 2,
    },
    {
      title: "用户昵称",
      dataIndex: "nickName",
      search: false,
    },

    {
      title: "邮箱",
      dataIndex: "email",
      search: false,
    },
    {
      title: "手机号",
      dataIndex: "phonenumber",
      order: 1,
    },
    {
      title: "状态",
      dataIndex: "status",
      search: false,
      valueEnum: {
        0: {
          text: "正常",
          status: "0",
        },
        1: {
          text: "停用",
          status: "1",
        },
      },
      render: (text, record) => {
        return (
          <Space>
            <Tag
              color={record.status == 0 ? "green" : "red"}
              icon={
                record.status == 0 ? (
                  <FontAwesomeIcon icon={faCheck} />
                ) : (
                  <FontAwesomeIcon icon={faXmark} />
                )
              }
            >
              {text}
            </Tag>
          </Space>
        );
      },
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      valueType: "dateTime",
      search: false,
    },
  ];

  //查询角色授权数据
  const getRoleAllocate = async (params: any, sorter: any, filter: any) => {
    const searchParams = {
      roleId: roleId,
      pageNum: params.current,
      ...params,
    };

    delete searchParams.current;

    const queryParams = new URLSearchParams(searchParams);

    Object.keys(sorter).forEach((key) => {
      queryParams.append("orderByColumn", key);
      if (sorter[key] === "ascend") {
        queryParams.append("isAsc", "ascending");
      } else {
        queryParams.append("isAsc", "descending");
      }
    });

    const body = await fetchApi(
      `/api/system/role/authUser/allocatedList?${queryParams}`,
      push
    );

    if (body !== undefined) {
      return body;
    }
  };

  //查询角色未授权数据
  const getRoleUnallocate = async (params: any, sorter: any, filter: any) => {
    const searchParams = {
      roleId: roleId,
      pageNum: params.current,
      ...params,
    };

    delete searchParams.current;

    const queryParams = new URLSearchParams(searchParams);

    Object.keys(sorter).forEach((key) => {
      queryParams.append("orderByColumn", key);
      if (sorter[key] === "ascend") {
        queryParams.append("isAsc", "ascending");
      } else {
        queryParams.append("isAsc", "descending");
      }
    });

    const body = await fetchApi(
      `/api/system/role/authUser/unallocatedList?${queryParams}`,
      push
    );

    if (body !== undefined) {
      return body;
    }
  };

  //取消授权按钮是否可用，选中行时才可用
  const [rowCanRemoveAuth, setCanRemoveAuth] = useState(false);

  //点击批量取消授权按钮
  const onClickBatchRemoveAuth = () => {
    setBatchRemoveAuthModalVisible(true);
  };

  //执行批量取消用户角色授权
  const executeBatchRemoveRoleAuth = async () => {
    const data = {
      roleId: roleId,
      userIds: selectedRowKeys.join(","),
    };

    const body = await fetchApi(
      `/api/system/role/authUser/cancelAll?${new URLSearchParams(data)}`,
      push,
      {
        method: "PUT",
      }
    );

    if (body !== undefined) {
      if (body.code == 200) {
        App.useApp().message.success("批量取消授权成功");
      } else {
        App.useApp().message.error(body.msg);
      }

      setSelectedRowKeys([]);
      //刷新表格
      if (actionRef.current) {
        actionRef.current.reload();
      }
    }
    setBatchRemoveAuthModalVisible(false);
  };

  //点击取消授权按钮
  const onClickRemoveAuth = (record: any) => {
    setRemoveAuthRecord(record);
    setRemoveAuthModalVisible(true);
  };

  //执行取消用户角色授权
  const executeRemoveRoleAuth = async () => {
    if (!removeAuthRecord) return;
    
    const data = {
      roleId: roleId,
      userId: removeAuthRecord.userId,
    };

    const body = await fetchApi("/api/system/role/authUser/cancel", push, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    if (body !== undefined) {
      if (body.code == 200) {
        App.useApp().message.success("取消授权成功");
      } else {
        App.useApp().message.error(body.msg);
      }

      //刷新表格
      if (actionRef.current) {
        actionRef.current.reload();
      }
    }
    setRemoveAuthModalVisible(false);
    setRemoveAuthRecord(null);
  };

  //取消单个取消授权操作
  const cancelRemoveAuth = () => {
    setRemoveAuthModalVisible(false);
    setRemoveAuthRecord(null);
  };

  //选中行操作
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const rowSelection = {
    onChange: (newSelectedRowKeys: React.Key[]) => {
      setSelectedRowKeys(newSelectedRowKeys);
      setCanRemoveAuth(newSelectedRowKeys && newSelectedRowKeys.length > 0);
    },
  };

  //未授权用户选中行操作
  const [selectedRowKeysUnallocate, setSelectedRowKeysUnallocate] = useState<
    React.Key[]
  >([]);

  const rowSelectionUnallocate = {
    onChange: (newSelectedRowKeys: React.Key[]) => {
      setSelectedRowKeysUnallocate(newSelectedRowKeys);
    },
  };

  //是否展示分配用户对话框
  const [showUnallocateModal, setShowUnallocateModal] = useState(false);

  //展示分配用户对话框
  const onClickShowModal = () => {
    if (unallocateActionRef.current) {
      unallocateActionRef.current.reload();
    }

    setShowUnallocateModal(true);
  };

  //确认分配新的用户
  const confirmAddUnallocate = async () => {
    const data = {
      roleId: roleId,
      userIds: selectedRowKeysUnallocate.join(","),
    };

    const body = await fetchApi(
      `/api/system/role/authUser/selectAll?${new URLSearchParams(data)}`,
      push,
      {
        method: "PUT",
      }
    );

    if (body !== undefined) {
      if (body.code == 200) {
        App.useApp().message.success(body.msg);
      } else {
        App.useApp().message.error(body.msg);
      }
    }

    setSelectedRowKeysUnallocate([]);

    if (unallocateActionRef.current) {
      unallocateActionRef.current.reload();
    }

    console.log(selectedRowKeysUnallocate);

    if (actionRef.current) {
      actionRef.current.reload();
    }

    setShowUnallocateModal(false);
  };

  //取消分配用户
  const cancelAddUnallocate = () => {
    setShowUnallocateModal(false);
  };

  //搜索栏显示状态
  const [showSearch, setShowSearch] = useState(true);
  //action对象引用
  const actionRef = useRef<ActionType>(null);
  //表单对象引用
  const formRef = useRef<ProFormInstance>(null!);

  //未分配用户列表action对象引用
  const unallocateActionRef = useRef<ActionType>(null);

  //当前默认条数
  const defaultPageSize = 10;

  return (
    <PageContainer
      header={{
        title: "分配用户",
        onBack(e) {
          push("/system/role");
        },
      }}
    >
      <ProTable
        formRef={formRef}
        rowKey="userId"
        rowSelection={{
          selectedRowKeys,
          ...rowSelection,
        }}
        columns={columns}
        request={async (params: any, sorter: any, filter: any) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          const data = await getRoleAllocate(params, sorter, filter);
          if (data !== undefined) {
            return Promise.resolve({
              data: data.rows,
              success: true,
              total: data.total,
            });
          }
          return Promise.resolve({
            data: [],
            success: true,
          });
        }}
        pagination={{
          defaultPageSize: defaultPageSize,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
        search={
          showSearch
            ? {
                defaultCollapsed: false,
                searchText: "搜索",
              }
            : false
        }
        dateFormatter="string"
        actionRef={actionRef}
        toolbar={{
          actions: [
            <Button icon={<PlusOutlined />} key="allocate" type="primary" onClick={onClickShowModal}>
              添加用户
            </Button>,

            <Button
              key="unallocate"
              danger
              icon={<DeleteOutlined />}
              disabled={!rowCanRemoveAuth}
              onClick={() => onClickBatchRemoveAuth()}
            >
              批量取消授权
            </Button>,
          ],
          settings: [
            {
              key: "switch",
              icon: showSearch ? (
                <FontAwesomeIcon icon={faToggleOn} />
              ) : (
                <FontAwesomeIcon icon={faToggleOff} />
              ),
              tooltip: showSearch ? "隐藏搜索栏" : "显示搜索栏",
              onClick: (key: string | undefined) => {
                setShowSearch(!showSearch);
              },
            },
            {
              key: "refresh",
              tooltip: "刷新",
              icon: <ReloadOutlined />,
              onClick: (key: string | undefined) => {
                if (actionRef.current) {
                  actionRef.current.reload();
                }
              },
            },
          ],
        }}
      />
      <Modal
        title={`选择用户`}
        width={1000}
        open={showUnallocateModal}
        onOk={confirmAddUnallocate}
        onCancel={cancelAddUnallocate}
      >
        <ProTable
          rowKey="userId"
          rowSelection={{
            selectedRowKeys: selectedRowKeysUnallocate,
            ...rowSelectionUnallocate,
          }}
          columns={unAllocateColumns}
          request={async (params: any, sorter: any, filter: any) => {
            // 表单搜索项会从 params 传入，传递给后端接口。
            const data = await getRoleUnallocate(params, sorter, filter);
            if (data !== undefined) {
              return Promise.resolve({
                data: data.rows,
                success: true,
                total: data.total,
              });
            }
            return Promise.resolve({
              data: [],
              success: true,
            });
          }}
          pagination={{
            defaultPageSize: defaultPageSize,
            showQuickJumper: true,
            showSizeChanger: true,
          }}
          search={
            showSearch
              ? {
                  defaultCollapsed: false,
                  searchText: "搜索",
                }
              : false
          }
          dateFormatter="string"
          actionRef={unallocateActionRef}
          toolbar={{
            actions: [],
            settings: [],
          }}
        />
      </Modal>
      
      {/* 批量取消授权确认模态框 */}
      <Modal
        title={
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
            <span>系统提示</span>
          </div>
        }
        open={batchRemoveAuthModalVisible}
        onOk={executeBatchRemoveRoleAuth}
        onCancel={() => setBatchRemoveAuthModalVisible(false)}
        okText="确认"
        cancelText="取消"
      >
        <p>确定要取消选中用户的角色授权吗？</p>
      </Modal>
      
      {/* 单个取消授权确认模态框 */}
      <Modal
        title={
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
            <span>系统提示</span>
          </div>
        }
        open={removeAuthModalVisible}
        onOk={executeRemoveRoleAuth}
        onCancel={cancelRemoveAuth}
        okText="确认"
        cancelText="取消"
      >
        <p>{`确定要取消用户“${removeAuthRecord?.userName}”的角色授权吗？`}</p>
      </Modal>
    </PageContainer>
  );
}